<template>
  <view class="mine main-box feat-grid">

    <view class="mine-module main-bg fx-col-e"
          :style="{'background-image': 'url('+ ossImage('mine/info-bg.png')+')'}"
    >

      <!-- 工具栏 -->
      <view class="mine-head fx-row-s">
        <view class="mine-head-img fx-row-c">
          <uv-image
            :width = "width"
            :height = "height"
            shape="circle"
            :src="renderData.currentUserInfo.avatar"
          ></uv-image>
          <view class="mine-head-img-sex fx-row-c">
            <uv-icon v-if="renderData.currentUserInfo.gender == '女'" :color="color.colorB" custom-prefix="custom-icon" size="40" name="xingbie1"></uv-icon>
            <uv-icon v-else :color="color.colorE" custom-prefix="custom-icon" size="40" name="xingbie"></uv-icon>
          </view>
        </view>

        <view class="mine-head-info">
          <view class="mine-head-info-name">{{ renderData.currentUserInfo.nickname }}</view>
          <view class="mine-head-info-sign">
            {{renderData.currentUserInfo.desc}}
          </view>
        </view>
      </view>

      <view class="mine-head-edit fx-row-e">
        <button v-if="renderData.isFollow" disabled class="mine-head-edit-btn icon-btn-c icon-btn-s2">已关注</button>
        <button v-else @click="handleGetFollow" class="mine-head-edit-btn icon-btn-c icon-btn-s2">+关注</button>
      </view>

    </view>


    <view class="mine-data fx-row-b">
      <view class="mine-data-fans">
        <text class="">{{ renderData.currentUserInfoExt.follower_number || 0 }} 粉丝</text>
        <text class="">{{ renderData.currentUserInfoExt.follow_number || 0 }} 关注</text>
      </view>
    </view>

    <view v-if="renderData.list.length>0" class="mine-script-tab">
      <uv-tabs :list="renderData.works"
               :is-scroll="false"
               v-model="currentTab"
               bg-color="transparent"
               :active-color="color.colorTextA"
               :inactive-color="color.colorTextB"
               bar-width="60"
               font-size="30"
      ></uv-tabs>
    </view>

    <view class="mt60" v-if="renderData.list.length<=0">
      <noData iconSize="150" text="Ta还没有作品哦" icon="custom-icon-queshengye1"></noData>
    </view>

    <view class="mine-script-works">
      <!--后端数据结构不一致组件内部处理 当前结构类型isUser-->
      <comScriptList :list="renderData.list" :isUser="true"></comScriptList>
    </view>

    <toast></toast>
  </view>
</template>
<script setup>
import {ref,reactive} from 'vue';

import comScriptList from '@/components/com-script/index'
import { ossImage,jump } from '@/utils/index';
import { header,color,mine } from '@/enums/constants';
import { onLoad,onReachBottom,onShow } from "@dcloudio/uni-app";
import loginApi from "@/apis/login";
import mineApi from "@/apis/mine";
import scriptApi from "@/apis/script";
import noData from '@/components/com-nodata';
const {width , height} = {...header.large};

const currentTab = ref(0);
const renderData = reactive({
  works:[
    {name:'作品集',cur:0}
  ],
  isFollow:false,
  targetUserId:'',
  currentUserInfo:{},
  currentUserInfoExt:{},

  list:[],
  pageSize:mine.pageSize,
  pageIndex:1,
})


//查询当前用户信息
const getCurrentUserInfo = ()=>{
  let para = {userId:renderData.targetUserId}
  loginApi.getUserInfo(para).then(res=>{
    if(res.code == 'SUCCESS'){
      renderData.currentUserInfo = res.data;
    }
  })
  loginApi.getUserInfoExt(para).then(res=>{
    if(res.code == 'SUCCESS'){
      renderData.currentUserInfoExt = res.data;
    }
  })
}

//关注当前用户
const handleGetFollow = ()=>{
  let para = {userId:renderData.targetUserId}
  mineApi.getFollow(para).then(res=>{
    if(res.code == 'SUCCESS'){
      uni.showToast({
        icon:'success',
        title:'关注成功!'
      })
      renderData.isFollow = true;
    }
  })
}

//获取剧本
const handleGetAuthorizeList = (type)=>{
  let para = {
    pageSize:mine.pageSize,
    pageIndex:renderData.pageIndex,
    userId:renderData.targetUserId
  }
  scriptApi.getMyScriptList(para).then(res=>{
    if(res.code == 'SUCCESS'){
      if(type == 'scroll' && res.data?.length<=0){
        uni.showToast({
          icon:'none',
          title:'暂无数据了!'
        })
      }
      if(res.data?.length>=1){
        renderData.list= renderData.list.concat(res.data);
        renderData.pageIndex++;
      }
    }
  })
}

//是否关注过该用户
const handleIsCheckUser = ()=>{
  let para={userId:renderData.targetUserId}
  loginApi.isCheckUser(para).then(res=>{
    if(res.code == 'SUCCESS' && res.data){
      renderData.isFollow = true;
    }
  })
}


onReachBottom(()=>{
  handleGetAuthorizeList('scroll');
})


onLoad((options) => {
  renderData.targetUserId = options?.userId;
  getCurrentUserInfo();
  handleGetAuthorizeList();
  handleIsCheckUser();
});

</script>

<style lang="scss" scoped>
.mine{
  background-color:$main-text-e;
  padding: 0;
  &-module{
    position: relative;
    color:$main-text-e;
    height: 430rpx;
    background-color:$main-text-c;
    padding:30rpx 30rpx 50rpx;
  }

  &-head{
    @include main-line4;
    &-img{
      width: 180rpx;
      position: relative;
      &-sex{
        position: absolute;
        width: 50rpx;
        height: 50rpx;
        bottom:0;
        right:0;
        border-radius:100%;
        background-color: rgba(255,255,255,0.9);
      }
    };
    &-info{
      margin-left: 20rpx;
      &-name{
        @include main-line2;
        @include main-text1;
      };
      &-sign{@include main-line2;color:$main-text-d;}
    }
    &-edit{
      &-btn{margin:0;border-radius: 25rpx;}
    }
  }



  &-data{
    position: relative;
    z-index: 3;
    margin-top: -25rpx;
    padding:26rpx;
    border-top-right-radius:25rpx;
    border-top-left-radius:25rpx;
    height: 80rpx;
    color:$main-text-a;
    background-color:$main-text-e;
    &-fans{text{margin-right: 40rpx}}
  }
  //剧本tab相关
  &-script{
    background-color:transparent;
    color:$main-text-a;
    &-tab{width:20%;background-color: transparent;}
    &-works{
      padding:0 30rpx;
      &:deep(.script-item){
        margin-top: 30rpx;
      }
    }
  }



}
</style>
